<template>
  <div>
    <div>
      <a-form-model ref="form" :model="form" v-bind="layout" :rules="rules" name="nest-messages"
        style="margin-right:10px">
        <a-list :data-source="data">
          <a-list-item slot="renderItem" slot-scope="item">
            <a-list-item-meta>
              <div slot="title"  @mouseover="() => {item.show = true; item.view = true}" @mouseleave="() => visibleChange(item, false)">
                <a-checkbox @change="changeCheckbox(item, $event)" :checked="item.checked">
                  <a-icon v-if="iconName(item)" :type="iconName(item)" :class="{ 'nbcs-btn-green': item.checked }" />
                  <span class="rule-bs">{{ item.typeName }}</span>
                </a-checkbox>
                <a-popover placement="right" v-if="findInfo(item.typeName).length > 0" @visibleChange="visible => item.view = visible">
                  <template slot="content">
                    <p v-for="n in findInfo(item.typeName)" v-bind:key="n">{{ n }}</p>
                  </template>
                  <span class="rule-info" v-show="item.show">
                      <a-icon type="exclamation-circle" v-show="item.view"/>
                  </span>
                </a-popover>
                </div>
              <div slot="description">
                <a-row :gutter="[16,16]">
                  <a-col v-for="child in item.children" v-bind:key="child.keyCode" :xs="{ span: 11, offset: 1 }"
                    :lg="{ span: 5, offset: 1 }">
                    <div @mouseover="() => {child.show = true; child.view = true}" @mouseleave="() => visibleChange(child, false)">
                    <span :class="{ 'rule-bi': true, 'rule-checked': child.checked }" @click="changeChild(child, item)">
                      <a-icon type="check-circle" v-if="child.checked" theme="filled" />
                      <a-icon type="check-circle" v-else />
                      &nbsp;
                      <span>{{ child.typeName }}</span>
                    </span>
                    <a-popover placement="right" v-if="findInfo(child.typeName).length > 0" @visibleChange="visible => child.view = visible">
                      <template slot="content">
                        <p v-for="n in findInfo(child.typeName)" v-bind:key="n">{{ n }}</p>
                      </template>
                      <span class="rule-info" v-show="child.show">
                          <a-icon type="exclamation-circle" v-show="child.view"/>
                      </span>
                    </a-popover>
                  </div>
                  </a-col>
                </a-row>
              </div>
            </a-list-item-meta>
          </a-list-item>
        </a-list>
      </a-form-model>
    </div>
  </div>
</template>

<script>
import moment from 'moment';
import { update, detail, descriList } from '@/services/checkRule';
import { dict } from '@/services/checkRule';
function copy(obj1, obj2) {
  if (obj1 != null && obj2 != null) {
    for (let p in obj1) {
      obj1[p] = obj2[p];
    }
  }
}

export default {
  name: 'UserForm',
  components: {},
  data() {
    return {
      form: {
        ruleName: "",
        id: null,
      },
      radioStyle: {
        height: '40px',
        lineHeight: '40px',
      },
      layout: {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
      },
      rules: {
        weight: [{ required: true, message: '请选择校对选项', trigger: 'blur' }]
      },
      dict: [],
      data: [],
    };
  },
  computed: {
  },
  created() {
    dict().then((res) => {
      const data = res.data;
      if (data.code == 0) {
        this.dict = data.data;
      } else {
        this.$message.error('查询失败');
      }
    })
  },
  methods: {
    moment,
    permission(name) {
      let permissions = this.$store.getters["account/permissions"];
      return permissions.filter(m => m.id == name || m.operation.indexOf(name) >= 0).length > 0
    },
    iconName(item) {
      let icon = [{ code: '100', icon: 'strikethrough' }, { code: '101', icon: 'rocket' }, { code: '102', icon: 'warning' }, { code: '103', icon: 'warning' }, { code: '105', icon: 'radar-chart' }, { code: '106', icon: 'bulb' }, { code: '107', icon: 'camera' }, { code: '200', icon: 'book' }];
      let a = icon.filter(m => {
        return item.typeCode == m.code;
      })
      if (a.length > 0) return a[0].icon;
      return null;
    },
    initData(rule, dict) {
      copy(this.form, rule);
      this.$nextTick(() => this.data = dict)
    },
    changeCheckbox(item, e) {
      item.checked = e.target.checked;
      item.children.forEach(m => m.checked = e.target.checked)
    },
    changeChild(item, node) {
      item.checked = !item.checked;
      node.checked = node.children.filter(m => m.checked).length == node.children.length;
    },
    load(id, fn) {
      if (id != null) {
        this.form.id = id;
      }
      if (this.form.id != null) {
        let p = {};
        p.id = this.form.id;

        detail(p).then((res) => {
          if (fn != null) fn();
          const data = res.data;
          if (data.code == 0) {

            let types = data.data.checkTypes != null && data.data.checkTypes != "" ? JSON.parse(data.data.checkTypes) : {};
            let firstLabel = types.firstLabel != null ? types.firstLabel.split(',') : [];
            let secondLabel = types.secondLabel != null ? types.secondLabel.split(/,|;/) : [];
            let dict = [];

            this.dict.forEach(m => dict.push(Object.assign({}, m)))
            let aFormModel = dict.filter(m => m.typeParentCode == 0).map(m => {
              m.children = dict.filter(n => n.typeParentCode == m.typeCode).map(n => {
                n.checked = types.schemeId == 1 || dict.filter(t => t.typeCode == n.typeCode && firstLabel.includes(t.typeParentCode)).length > 0 || secondLabel.includes(n.typeCode)
                n.show = false;
                n.view = false;
                return n;
              })
              m.checked = types.schemeId == 1 || firstLabel.includes(m.typeCode)
              m.show = false;
              m.view = false;
              return m;
            });

            this.initData(data.data, aFormModel)
          } else {
            this.$message.error(data.message)
          }
        })
      } else {
        this.initData({}, []);
      }
    },
    ok(fn) {
      this.$refs.form.validate((valid) => {
        if (!valid) {
          return false;
        }
        let checkTypes = { schemeId: null, firstLabel: "", secondLabel: "" };
        if (this.data.filter(m => m.checked).length != this.data.length) {
          let firstLabel = [];
          let secondLabel = [];
          this.data.forEach(m => {
            if (m.checked) {
              firstLabel.push(m.typeCode);
            } else {
              let t = [];
              m.children.forEach(n => {
                if (n.checked) {
                  t.push(n.typeCode);
                }
              })
              if (t.length > 0)
                secondLabel.push(t.join(','))
            }
          })
          checkTypes.schemeId = 0;
          checkTypes.firstLabel = firstLabel.join(',');
          checkTypes.secondLabel = secondLabel.join(';');
          this.form.checkTypes = JSON.stringify(checkTypes);
        } else {
          checkTypes.schemeId = 1;
          this.form.checkTypes = JSON.stringify(checkTypes);
        }
        if (this.form.id != null) {
          update(this.form).then((res) => {
            if (fn != null) fn()
            if (res.data.code === 0) {
              this.$message.success('修改成功');
              this.$emit('getList', this.form.id);
            } else {
              this.$message.error('修改失败')
            }
          });
        } else {
          this.$message.error('修改失败')
        }
      });
    },
    findInfo(name) {
      let item = descriList.filter(m => m.name == name);
      console.log(name)
      if(item.length > 0) {
        if(typeof(item[0].value) == 'string')
        return [item[0].value];
        else return item[0].value;
      } else {
        return [];
      }
    },
    visibleChange(node, visible) {
      console.log(visible)
      if(!visible) {
        if(!node.view)
        setTimeout(() => {if(!node.view) node.show = false;}, 200)
        else
        setTimeout(() => {node.view = false}, 200)
      }
    }
  },
};
</script>

<style lang="less" scoped>
.rule-bs {
  font-weight: 600;
  font-size: 15px;
  margin-left: 5px;
}

.rule-bi {
  .rule-checked& {
    color: #000;
  }
  cursor: pointer;
}
.rule-info {
  width: 20px;height:20px; display:inline-block;margin-left:5px;position:absolute;
  display:inline-block;
  vertical-align: bottom;
}
</style>
